import React from "react";
import { useFullscreen } from "ahooks";
import { Button } from "antd";
import { useGlobalStore } from "@/store/global";
import { useShallow } from "zustand/react/shallow";

const Fullscreen: React.FC = () => {
  const { headerInverted } = useGlobalStore(useShallow((state) => ({ headerInverted: state.headerInverted })));

  const [isFullscreen, { toggleFullscreen }] = useFullscreen(() => document.body);

  return (
    <Button
      type="text"
      size="large"
      className={`${headerInverted ? "[&_.ant-btn-icon]:text-white!" : ""} [&_.ant-btn-icon]:flex [&_.ant-btn-icon]:items-center`}
      icon={<i className={`iconfont ${isFullscreen ? "icon-suoxiao" : "icon-fangda"}`}></i>}
      onClick={toggleFullscreen}
    />
  );
};

export default Fullscreen;
